<template>
  <div id="ctrl-box">
    <p>拥堵指数控制台</p>
    <div class="li-box">
      <span class="highlight-title" title="分析时间">分析时间:</span>
      <span :class="[history_type === 'month'?'highlight':'','radio_tip']" @click="setHistoryType('month')">月分析</span>
      <span class="tog-box" @click="setHistoryType()"><span
        :class="[history_type === 'year'?'year':'month','tog-tip']"></span></span>
      <span :class="[history_type === 'year'?'highlight':'','radio_tip']" @click="setHistoryType('year')">年分析</span>
      <span class="highlight ml-5"><span>{{history_time.year}}</span> 年</span>
      <span
        :class="[history_type === 'month'?'highlight':'disabled','ml-5']"><span>{{history_time.month}}</span> 月</span>
      <span class="calendar-box">
        <span class="calendar" @click="toggleCalendar()"></span>
        <Calendar v-show="isCalendarShow" @calendarOp="setCalendarInfo"/>
      </span>
      <span class="reset-btn" @click="resetCurDate">返回当前月/年</span>
    </div>
    <div class="li-box">
      <span class="highlight-title" title="日期类型">日期类型:</span>
      <ul>
        <li v-for="item in dateType" @click="setDateType(item)" :class="[date_type === item.type?'active':'',disabledClass(item.type)]"  :title="item.type === 'all'&&map_level==='05'&&isOftenShow?jamTip:''">
          <span class="radio-bg"><span :class="[date_type === item.type?'radio-active':'']"></span></span>
          <span class="type">{{item.name}}</span>
        </li>
      </ul>
    </div>
    <div class="li-box">
      <span class="highlight-title time-ctrl" title="时段控制">时段控制:</span>
      <TimeLine/>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import TimeLine from './ctrl/TimeLine.vue'
  import Calendar from './ctrl/calendar.vue'
  import eventBus from '../../util/event-bus'
  export default {
    name: 'CtrlBox',
    data () {
      return {
        dateType: [
          {
            type: 'all',
            name: '全部日期'
          },
          {
            type: 'work',
            name: '工作日'
          },
          {
            type: 'nonwork',
            name: '非工作日'
          }
        ],
        isCalendarShow: false,    //年月选择是否显示
        jamTip:'常发拥堵暂无全部日期筛选',
        isOftenShow:false,
      }
    },
    mounted(){
      eventBus.$on("closeOftenShow", (bool) => {
        this.isOftenShow = bool;
      });
    },
    computed: {
      ...mapGetters(['history_type', 'date_type', 'history_time','cur_state','map_level']),
    },
    components: {
      TimeLine,
      Calendar,
    },
    methods: {
      ...mapMutations(['updateHistoryType', 'updateDateType', 'updateHistoryTime']),
      setHistoryType(type){
        if (!type) {
          type = this.history_type === 'month' ? 'year' : 'month';
        }
        this.updateHistoryType(type);
      },
      setDateType(item){
          if(item.type === 'all' && this.cur_state === 'history' && this.map_level === '05'&&this.isOftenShow){
            return ;
          }else{
            this.updateDateType(item.type);
          }
      },
      toggleCalendar(){
        this.isCalendarShow = !this.isCalendarShow;
      },
      setCalendarInfo(bool){
        this.$nextTick(() => {
          this.isCalendarShow = false;
        });
      },
      resetCurDate(){
        let date = new Date;
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
          this.updateHistoryTime({year:year,month:month<10?'0'+parseInt(month):month});
      },
      disabledClass(type){
        if(type === 'all' && this.cur_state === 'history' && this.map_level === '05'&&this.isOftenShow){
          return 'disabled';
        }
      }
    },
    watch:{
      date_type(curVal, oldVal){
        if (curVal != oldVal) {
          //this.jamTip = curVal === 'all' && this.cur_state === 'history' ? '常发拥堵只区分工作日、非工作日' : '';
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "../../common/common.scss";

  #ctrl-box {
    width: calc(100% - 14px);
    min-height: 120px;
    margin: 7px;
    background-color: rgba(49, 49, 49, 0.6);
    p {
      font-size: $font-middle;
      text-align: center;
      line-height: 25px;
      padding-top: 5px;
    }
    .li-box {
      line-height: 23px;
      .highlight-title {
        color: $font-highlight;
        font-weight: bold;
        padding-left: 6px;
        letter-spacing: 1px;
        width: 58px;
        /*&.time-ctrl{*/
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        /*}*/
      }
      .radio_tip {
        cursor: pointer;
        opacity: 0.7;
      }
      .highlight {
        color: $font-highlight;
        opacity: 1;
      }
      .ml-5 {
        margin-left: 5px;
      }
      span {
        display: inline-block;
        vertical-align: middle;
        /*font-size:14px;
        -webkit-transform-origin-x: 0;
        -webkit-transform: scale(0.80);*/
        span {
          vertical-align: middle;
        }
      }
      .disabled {
        opacity: 0.7;
      }
      .tog-box {
        width: 24px;
        height: 14px;
        border-radius: 14px;
        margin: 0 2px;
        background-color: rgba(255, 255, 255, 0.2);
        position: relative;
        cursor: pointer;
        .tog-tip {
          position: absolute;
          width: 8px;
          height: 8px;
          top: 3px;
          border-radius: 50%;
          background-color: $font-highlight;
          &.year {
            left: 12px;
          }
          &.month {
            left: 3px;
          }
        }
      }
      .calendar-box{
        cursor: pointer;
        position: relative;
        width: 20px;
        height: 14px;
        .calendar {
          display: block;
          width: 20px;
          height: 14px;
          background: url("../../../static/images/calendar-icon.png") no-repeat center;
        }
      }
      .reset-btn {
        width: 78px;
        height: 16px;
        border-radius: 9px;
        background-color: rgba(255, 255, 255, 0.4);
        opacity: 0.6;
        border: solid 0.5px #ffffff;
        font-size: 10px;
        line-height: 16px;
        padding: 0 7px;
        cursor: pointer;
        position: relative;
        top: -1px;
        &:hover{
          opacity: 1;
        }
      }
      ul {
        display: inline-block;
        li {
          display: inline-block;
          vertical-align: middle;
          list-style: none;
          cursor: pointer;
          &.disabled{
            cursor: not-allowed;
          }
          span {
            display: inline-block;
            vertical-align: middle;
          }
          .type {
            margin-right: 10px;
            opacity: 0.7;
          }
          &.active {
            .type {
              opacity: 1;
            }
          }
          .radio-bg {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.2);
            margin-right: 5px;
            cursor: pointer;
            opacity: 1;
            .radio-active {
              display: block;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background-color: #fff;
              margin: 3px;
              opacity: 1;
            }
          }
        }
      }
    }
  }
</style>
